/**
 * 收款详情
 */
import React,{ useEffect, useState } from 'react';
import { Row, Button, Space,message } from 'antd';
import moment from 'moment';
import { history} from 'umi';
import { scrollToAnchor } from '@/utils';
import Info from '../child/info';
import TableInfo from '../child/tableInfo';
import page from '../../page.less';
import {getIncomeReceivable} from '@/service/fiance/index'
// import type {UploadFile} from 'antd/es/upload/interface'
import {getPublicDownloadUrl} from '@/service/common/upload'




function Details(props: any) {
  const data = props
  const { query: { id }} = data.location;
  const [receivableInformation,setReceivableInformation] = useState<any>(
    { 
      plateNo:'',receivableNo:'',driverName:'',
      lessorName:'',collectionTypename:'',paymentMethodname:'',
      rentTypename:'',stage:'',receivableTime:'',overdueDays:'',
      payStatus:'',payStatusname:'',logListDtoList:[],receivableAmount:'',
      receivedAmount:'',abatementAmount:'',exemptionAmount:'',uncollectedAmount:'',collectionType:''
    }) // 应收单信息
  const [accountsReceivable,setAccountsReceivable]= useState<any[]>([]) // 已收账款
  const [urlLists,setUrlLists]= useState<any[]>() // 已收账款
  // const [operationRecord,setOperationRecord] = useState([])
  const getList =()=>{
    getIncomeReceivable(id).then((res:any)=>{
      if(res?.success){
        if(res?.data){
          const datas = {...res?.data}
          datas.overdueDays = moment(datas?.collectionTime).diff(moment(datas?.receivableTime),'days')>0? moment(datas?.collectionTime).diff(moment(datas?.receivableTime),'days'):'0'
          setReceivableInformation(datas)
          // setOperationRecord(data?.logListDtoList) 
          if(datas?.flowList){
            const urlArr:number[] = []
            const newData = [...datas.flowList]
            datas?.flowList?.forEach((item: { urlList: any[]; })=>{
              item?.urlList?.forEach((items)=>{
                urlArr?.push(Number(items))
              })
            })
            if(urlArr?.length){
              getPublicDownloadUrl(urlArr).then((item:any)=>{  
                // 需要重新赋值
                if(item?.success){
                  setUrlLists(item?.data)
                
                }
              })
            }
            setAccountsReceivable(newData)
          }
         
        }
      }
    })
  }
  useEffect(() => {
    const newData = [...accountsReceivable]
    accountsReceivable?.forEach((item: { urlList: any[]; },index:number)=>{
        newData[index].list = []
        urlLists?.forEach((urlItem:any)=>{
        if(item?.urlList?.toString().includes(urlItem?.id)){
          newData[index].list.push(urlItem)
        }
      })
    })
    setAccountsReceivable(newData)
  }, [urlLists])
  
  useEffect(()=>{
    getList()
  },[id])
  const receivableInfo = [
    { label: '车牌号', value: receivableInformation?.plateNo || '--'},
    { label: '应收单号', value: receivableInformation?.receivableNo || '--'},
    { label: '司机名称', value: receivableInformation?.driverName || '--'},
    { label: '所属公司', value: receivableInformation?.lessorName || '--'},
    { label: '收款类型', value: receivableInformation?.collectionTypename }|| '--',
    { label: '付款方式', value: receivableInformation?.paymentMethodname || '--'},
    { label: '租赁类型', value: receivableInformation?.rentTypename || '--'},
    { label: '账单期数', value: receivableInformation?.stage || '--'},
    { label: '应收日期', value: receivableInformation?.receivableTime || '--'},
    { label: '逾期天数', value: receivableInformation?.overdueDays || '--' },
  ];
  // 费用明细
  const expenseDetails = [
    { label: '应收费用', value: receivableInformation?.receivableAmount || '0'},
    { label: '已收费用', value: receivableInformation?.receivedAmount || '0'},
    { label: '费用减免金额', value: receivableInformation?.abatementAmount || '0'},
    { label: '免租金额', value: receivableInformation?.exemptionAmount || '0'},
    { label: '待收', value: receivableInformation?.uncollectedAmount || '0'},
  ]
  // 定金费用明细
  const depositExpenseDetails = [
    { label: '应收费用', value: receivableInformation?.receivableAmount || '0'},
    { label: '已收费用', value: receivableInformation?.receivedAmount || '0'},
    { label: '待收', value: receivableInformation?.uncollectedAmount || '0'},
  ]
  // 原订单押金
  const oldDeposit = [
    { label: '应收费用', value:  (Number(receivableInformation?.totalAmount)-Number(receivableInformation?.receivableAmount)).toFixed(2)},
    { label: '已收费用', value: (Number(receivableInformation?.totalAmount)-Number(receivableInformation?.receivableAmount)).toFixed(2) },
   ]
   // 续签订单押金
   const continuedDeposit = [
    { label: '应收费用', value: receivableInformation?.totalAmount || '0'},
   ]
   // 原订单押金
   const repairDeposit = [
    { label: '应收费用', value: receivableInformation?.receivableAmount || '0'},
    { label: '已收费用', value: receivableInformation?.receivedAmount || '0'},
    { label: '待收', value: receivableInformation?.uncollectedAmount || '0'},
   ]
   const [statue1,setStatue1] = useState(1)
   const [statue2,setStatue2] = useState(1)
   const [statue3,setStatue3] = useState(1)
  useEffect(()=>{
    // 定金只有3项 ，其余的5项 
    if(receivableInformation?.collectionType === "1"){
      setStatue1(2)
      setStatue2(1)
      setStatue3(1)
    }else {
      setStatue1(1)
      setStatue2(1)
      setStatue3(2)
    }
    // 押金续签会产生原订单
    if(receivableInformation?.collectionType === "2"  && receivableInformation?.renewLeaseStatus ===2){
      setStatue1(1)
      setStatue2(2)
      setStatue3(1)
    }else if(receivableInformation?.collectionType === "2"  && receivableInformation?.renewLeaseStatus ===1){
      setStatue1(2)
      setStatue2(1)
      setStatue3(1)
    }
  })
  const columns = [
    {
      title: '应收单编号',
      dataIndex: 'receivableNo',
      align: 'center',
    },
    {
      title: '支付流水号',
      dataIndex: 'transactionNo',
      align: 'center',
    },
    {
      title: '实收金额',
      dataIndex: 'actualAmount',
      align: 'center',
    },
    {
      title: '收款时间',
      dataIndex: 'collectionTime',
      align: 'center',
    },
    {
      title: '支付类型',
      dataIndex: 'peyTypename',
      align: 'center',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      align: 'center',
    },
    {
      title: '附件',
      dataIndex: 'flowList',
      align: 'center',
      render: (text:any,record:any) =><>{
          record?.list?.map((res:any)=>(
               <p> <a href={res.url} target="_blank" rel="noreferrer">{res.filename}</a></p>
            ))
        }</>
      
    },
  ];
  // 操作记录
  const recordColumns = [
    { title: '操作人', dataIndex: 'logPersonname' },
    { title: '操作内容', dataIndex: 'logRemark' },
    { title: '操作时间', dataIndex: 'logTime' },
  ];
  return (
    <div className={page.page}>
      <Row style={{ marginBottom: '15px' }}>
        <Space>
          <Button
            onClick={() => {
              scrollToAnchor('basic');
            }}
          >
            应收详情
          </Button>
          {/* <Button
            onClick={() => {
              scrollToAnchor('costInfo');
            }}
          >
            实收详情
          </Button> */}
          {receivableInformation?.flowList?.length>0 &&  
              <Button
                onClick={() => {
                  scrollToAnchor('accountsReceived');
                }}
              >
                实收详情
              </Button>
          }
          
          {receivableInformation?.logListDtoList?.length>0 &&
              <Button
                onClick={() => {
                  scrollToAnchor('operationRecord');
                }}
              >
                操作记录
              </Button>
          }
          
        </Space>
      </Row>

      <Info
        title="应收单信息"
          info={receivableInfo}
          span={8}
          state={{ label: '支付状态', value: receivableInformation?.payStatusname }}
        />
        {statue1===2 &&
             <Info
              title="费用明细"
              info={depositExpenseDetails}
              span={8}
              state={{ label: '', value: '' }}
            /> 
        }
        {statue2===2 &&
          <>
             <Info
               title="原订单押金费用明细"
               info={oldDeposit}
               span={8}
               state={{ label: '', value: '' }}
             /> 
             <Info
               title="续签押金费用明细"
               info={continuedDeposit}
               span={8}
               state={{ label: '', value: '' }}
             /> 
             <Info
               title="需要补缴押金费用明细"
               info={repairDeposit}
               span={8}
               state={{ label: '', value: '' }}
             /> 
         </>
        }
        {statue3===2 &&
             <Info
              title="费用明细"
              info={expenseDetails}
              span={8}
              state={{ label: '', value: '' }}
            /> 
        }
        {
          receivableInformation?.flowList?.length>0 &&  
          <TableInfo
            id="accountsReceived"
            title="已收账款"
            columns={columns}
            dataSource={accountsReceivable}
          />
        }
     
      {receivableInformation?.logListDtoList?.length>0 &&
           <TableInfo
            id="operationRecord"
            title="操作记录"
            columns={recordColumns}
            dataSource={receivableInformation?.logListDtoList}
          />
      }
     
      <div style={{display:'flex',justifyContent:'center'}}>
					<Space size={12}>
						<Button
							type="primary"
							shape="round"
							ghost
							size="small"
							onClick={() => {
								history.goBack()
							}}>
							关闭
						</Button>
					</Space>
				</div>
    </div>
  );
}

export default Details;
